<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/top.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/detailsPage.css">
    <script src="../lib/jquery-1.12.4.js"></script>
   <!-- 轮播图 -->
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <script src="../lib/swiper/js/swiper.min.js"></script>
</head>
<body>
    <!-- 头部导航栏 -->
    <nav>
        <div class="nav-wrap">
            <a>小米商城</a>
            <span>|</span>
            <a>MIUI</a>
            <span>|</span>
            <a>loT</a>
            <span>|</span>
            <a>云服务</a>
            <span>|</span>
            <a>金融</a>
            <span>|</span>
            <a>有品</a>
            <span>|</span>
            <a>小爱开放平台</a>
            <span>|</span>
            <a>企业团购</a>
            <span>|</span>
            <a>资质证照</a>
            <span>|</span>
            <a>协议规则</a>
            <span>|</span>
            <a>下载app</a>
            <span>|</span>
            <a>SelectLocation</a>
            <div class="nav_right">
                <a href="./signIn.html">登录</a>
                <span>|</span>
                <a href="./register.html">注册</a>
                <span>|</span>
                <a href="">消息通知</a>
                <a href="" class="shopping_cart">购物车(0)</a>
            </div>
        </div>
    </nav>
    <!-- 搜索栏 -->
    <div class="site-header">
        <div class="hearder_l">
            <div class="con">
                <a href="#"> <img src="../images/mi-home.png" alt=""></a>
                <a href="#"> <img src="../images/mi-logo.png" alt=""></a>
            </div>
        </div>
        <div class="hearder_r">
            <div class="hearder_nav">
                <a href="">小米手机</a>
                <a href="">Redmi红米</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">智能硬件</a>
                <a href="">服务</a>
                <a href="">社区 </a>
            </div>
            <form class="hearder_search">
                <input type="text" class='input'>
                <a href="" class="a"></a>
                <ul class="ul"></ul>
            </form>
        </div>
    </div>
    <div id="title">
        <div class="title-wrap">
            <h2>小米净水器600G<a href="">用户评价</a></h2>
        </div>
    </div>
    <div class="product-box">
        <div class="product-box_l">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="../images/21.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../images/22.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../images/flash-2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="../images/24.jpg" alt=""></div>
                </div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </div>
        <div class="product-box_r">
            <h2>小米净水器600G</h2>
            <h3>1699</h3>
            <p>600加仑大流量 / 即滤即饮无存水 / 纤薄小巧省空间 / RO反渗透技术 智能灯控水龙头 / 自主换芯 / 无需自主预约，安装人员主动与您沟通安装时间，免费上门安装</p>
            <span>小米自营</span>
            <div class="product-box_color">
                <em>选择颜色</em>
                <a href="">白色</a>
            </div>
            <div class="product-box_price">
                <i>小米净水器600G 白色</i>
                <strong>秒杀价：1699元</strong>
            </div>
            <div class="product-box_shoppimg"><a href="javascript:void(0)">加入购物车</a></div>
        </div>

    </div>
    <div class="xiangqing">
        <img src="../images/25.jpg" alt="">
    </div>
    <script>
        $(".product-box_shoppimg a").on("click",()=>{
            var sign=localStorage.getItem('sign');
            if(JSON.parse(sign).static){
                var cName=$(".product-box_r>h2").html();
                var cPrice=$(".product-box_r>h3").html();
                $.ajax({
                url:'http://localhost/src/php/addwq.php',
                type:'post',
                // dataType:'jsonp',
                data:{id:'1',name:cName,img:"../images/21.jpg",price:cPrice},
                success:function(data){
                    var json = JSON.parse(data);
                   if(json.code=='1'){
                    　 alert("加入购物车成功!")  
                   }
                   else{
                    　 alert("加入购物车失败!")  
                   }
                },
                // complete:function(){
                //     console.log('ajax完成了')
                // },
                // error:function(XMLHttpRequest, textStatus){
                //     console.log(textStatus)
                //     console.log('ajax发生错误了')
                // },
                timeout:2000,
            })
                // 　window.location.href="http://localhost/src/pages/shoppingCart.html";
            }
            else{
                alert("您还没有登录请先登录!")
                　window.location.href="http://localhost/src/pages/signIn.html";
            }
        })
    </script>
    <script>        
        var mySwiper = new Swiper ('.swiper-container', {
          direction: 'horizontal', // 垂直切换选项
          loop: true, // 循环模式选项
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        </script>
      </body>
</body>
</html>